<template>
  <div class="baoming">
    <div class="baoming-center">
      <div class="baoming-row">
        <div class="baoming-top">
          <h2 class="title">{{configs.college_name}}</h2>
          <p class="desc">报名热线：{{configs.consult_phone}}</p>
          <p class="desc">移动电话：{{configs.mobile_phone}}</p>
          <p class="desc">
            报名地址：{{configs.consult_address}}
          </p>
          <div class="link">
            友情链接：
            <a v-for="item,index in links" :key="index" :href="item.url" :title="item.name">{{item.name}}</a>
          </div>
        </div>
        <div class="baoming-qrcode">
          <img
            class="img_lazy_load paragraph_image"
            :src="configs.consult_qrcode_1"
            style="width: 114px; height: 114px; display: inline-block"
          />
        </div>
      </div>
      <div class="baoming-form">
        <h3 class="form-title">在线报名</h3>
        <p class="form-inline">您的姓名</p>
        <input type="text" placeholder="请输入您的姓名" v-model="name" class="form-input" />
        <p class="form-inline">联系方式</p>
        <input
          type="text"
          maxlength="11"
          placeholder="请输入联系方式"
          v-model="phone"
          class="form-input"
        />
        <p class="form-inline">报考类型</p>
        <el-select v-model="type" style="width: 100%;" placeholder="请选择报考类型">
          <el-option value="低压电工证">低压电工证</el-option>
          <el-option value="高压电工证">高压电工证</el-option>
          <el-option value="焊工证">焊工证</el-option>
          <el-option value="高处作业证">高处作业证</el-option>
          <el-option value="空调与制冷证">空调与制冷证</el-option>
          <el-option value="证件复审换新">证件复审换新</el-option>
          <el-option value="其他特种工操作证">其他特种工操作证</el-option>
          <el-option value="学历提升">学历提升</el-option>
        </el-select>
        <button class="form-save" @click="saveForm" :disabled="formDisabled">立即报名</button>
      </div>
    </div>
  </div>
</template>

<script>
import u from '@/plugins/comm'
export default {
  props: ['links', 'configs'],
  data() {
    return {
      name: '',
      phone: '',
      type: '学历提升',
      formDisabled: false
    }
  },
  methods: {
    saveForm() {
      if (!/^[\u4e00-\u9fa5]{1,}$/.test(this.name)) {
        this.$message({
          message: '请正确输入您的姓名',
          type: 'warning'
        })
        return false
      }
      if (!/^1[3456789]\d{9}$/.test(this.phone)) {
        this.$message({
          message: '请正确输入联系方式',
          type: 'warning'
        })
        return false
      }
      if (this.type == '') {
        this.$message({
          message: '请选择报考类型',
          type: 'warning'
        })
        return false
      }
      this.formDisabled = true
      u.http({
        agent: true,
        url: this.$store.state.consult,
        headers: {
          'content-type': 'application/json'
        },
        data: {
          user_name: this.name,
          phone: this.phone,
          type: this.type
          // type: this.type == '学历' ? 2 : 1
        }
      }).then(res => {
        if (res.code == 200) {
          this.name = ''
          this.phone = ''
          this.major = ''
          this.remarks = ''
          this.formDisabled = false
          this.$message({
            message: '提交成功',
            type: 'success'
          })
          return false
        }
        this.$message({
          message: res.msg,
          type: 'error'
        })
        this.formDisabled = false
      }).catch(err => {
        this.$message({
          message: err,
          type: 'error'
        })
        this.formDisabled = false
      })
    }
  }
}
</script>